<style type="text/css">
	.page-header .left {
		width: calc(100% - 220px);
	}

	@media only screen and (max-width: 479px) and (min-width: 320px) {
		.page-header .left {
			width: 100%;
		}
	}
</style>
<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['异常警报','问题记录[人工]']" icon="fa fa-exclamation-circle" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>

	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>问题记录[人工]</h2>
				</header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn">
								<sa-company-tree-car companyTreeId="companyTree" [companyData]="inputCompanyTreeCarData" (companySelected)="companySelected($event)"></sa-company-tree-car>
								<div class="top_module top_module_box">
									<span class="top_module_label module_text">问题分类</span>
									<select name="" class="top_module_select" [(ngModel)]="exceptionType" (change)='exceptionTypeChange()' style="min-width: 120px;">
										<option value="">全部</option>
										<option value="" *ngFor="let item of questionTypeList" [value]="item.id">{{item.label}}</option>
									</select>
								</div>
								<div class="top_module top_module_box">
									<span class="top_module_label module_text">现象分类</span>
									<select name="" class="top_module_select" [(ngModel)]="programType" style="min-width: 120px;">
										<option value="">全部</option>
										<option value="" *ngFor="let item of questionTypeDetailList" [value]="item.id">{{item.label}}</option>
									</select>
								</div>

								<div class="top_module top_module_box">
									<span class="top_module_label module_text">车辆用途</span>
									<select name="" class="top_module_select" [(ngModel)]="useTypeL1" (change)='carUseTypeL1Change()' style="min-width: 120px;">
										<option value="">全部</option>
										<option value="" *ngFor="let item of carTypeList" [value]="item.id">{{item.label}}</option>
									</select>
								</div>
								<div class="top_module top_module_box">
									<span class="top_module_label module_text">车辆分类</span>
									<select name="" class="top_module_select" [(ngModel)]="useTypeL2" style="min-width: 120px;">
										<option value="">全部</option>
										<option value="" *ngFor="let item of carTypeDetailList" [value]="item.id">{{item.label}}</option>
									</select>
								</div>
								<div class="top_module">
									<span class="module_text">审核状态</span>
									<select name="" id="" class="module_inp" [(ngModel)]="isCheck">
										<option value="">全部</option>
										<option value="0">未审核</option>
										<option value="1">审核通过</option>
									</select>
								</div>
								<div class="selectDate top_module">
									<table-select-date [notInit]='true' [specifyTime]="InputTime" (outerTime)="getSelectTableTime($event)"></table-select-date>
								</div>
								<button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
								<button type="button" class="btn btn-primary" (click)="exprotData()">明细报表</button>
								<button type="button" class="btn btn-primary" (click)="carDataAbnormalTop(dataAbnormalModal)">Top排名</button>
								<button type="button" class="btn btn-primary" (click)="problemTotalTable(problemTotalModal)">问题汇总统计图</button>
								<button type="button" class="btn btn-primary" (click)="getProblemsDatas(myModal)">问题汇总明细</button>
							</div>
							<div class="right top-search">
								<input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input" placeholder="车牌,设备ID...">
								<span class="top-search-box">
									<button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
								</span>
							</div>
						</div>
						<div class="table_scroll">
							<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
								<thead>
									<tr>
										<!--<th style="width: 55px;"><input type="checkbox" (change)="selectFn()" /></th>-->
										<th>设备ID</th>
										<th>车牌号</th>
										<th>版本</th>
										<th>问题分类</th>
										<th>现象分类</th>
										<th>问题原因</th>
										<th>车辆用途</th>
										<th>用途分类</th>
										<th>开始时间</th>
										<th>结束时间</th>
										<th>系数</th>
										<th>录入时间</th>
										<th>录入人员</th>
										<th>状态</th>
										<th>审核人员</th>
										<th>审核时间</th>
										<th>备注</th>
										<th>操作</th>

									</tr>
								</thead>
								<tbody>
									<tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i" [ngClass]="{selected:activeSelected === row.id}" (dblclick)='checkAbnormal(row)'>
										<!--<td><input type="checkbox" (change)="onCheckboxChangeFn(row.id)" /></td>-->
										<td>{{row.deviceId}}</td>
										<td>{{row.carNumber}}</td>
										<td>{{row.version}}</td>
										<td>{{row.exceptionType}}</td>
										<td>{{row.programType}}</td>
										<td>{{row.reason}}</td>
										<td>{{row.useTypeL1}}</td>
										<td>{{row.useTypeL2}}</td>
										<td>{{row.startDate}}</td>
										<td>{{row.endDate}}</td>
										<td>
											<span *ngIf='row.coef.length >0'>
												<span>[</span><span *ngFor="let lis of row.coef;let i = index;">
													<span style="font-weight: bold;">CH{{lis.index}}:</span><span>{{lis.value}}<span *ngIf="i < row.coef.length-1">,</span></span>
												</span><span>]</span>
											</span>
										</td>
										<td>{{row.createDate}}</td>
										<td>{{row.createUserName}}</td>

										<td>
											<span *ngIf='row.isCheck=="1"' class="green">审核通过</span>
											<span *ngIf='row.isCheck=="0"' class="orange">未审核</span>
										</td>
										<td>{{row.userNameForCheck}}</td>
										<td>{{row.checkDate}}</td>
										<td>{{row.remark}}</td>
										<td>
											<button type="button" (click)='checkAbnormal(row)'>查看</button>
											<button type="button" *ngIf="checkQuanxian&&row.isCheck=='0'||checkQuanxian&&row.isCheck" (click)="setCheckrowMes(row);checkModay.show();">审核</button>
											<button type="button" *ngIf="row.zipPath" (click)='jumpDataload(row)' title="数据下载">下载</button>
											<button type="button" (click)='deleteRow(row)'>删除</button>
										</td>

									</tr>
								</tbody>
							</table>
						</div>
						<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1" (onPageChange)="paginate($event)">
							</paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>
	<!--折线图-->
	<div style="background: white;border-radius: 5px;margin-top: 5px;position: relative;" [hidden]='!isChartView'>
		<button (click)="closeChart()" class="div_closeBtn"> × </button>
		<div class="widget-body no-padding" style="margin: 0;">
			<div class="page-header clearfix s_table_opreation" style="margin: 0;">
				<div class="left page-header-btn" style="padding: 5px;">
					<div class="top_module">
						<span class="module_text" style="background: none;">异常数据折线图</span>
					</div>
					<div style="display: inline-block;">
						<div>
							<div class="selectDate top_module">
								<table-select-date [notInit]='true' [specifyId]='specifyId' [specifyTime]='specifyTime' (outerTime)="getSelectChartTime($event)"></table-select-date>
							</div>
							<button type="button" class="btn btn-primary" (click)="drawAbnormalChart()">查看</button>
							<button type="button" class="btn btn-primary" *ngIf="checkQuanxian&&quickAudit" (click)="modalCheckEvent();">快速审核</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<sa-chart-bmap [height]='325' [offDatas]='true' [inputParams]='selectedRow' [isBaiduMap]='true' (outerSend)="runParent($event)" (outerIsMap)='showMapView($event)'></sa-chart-bmap>
		<div [hidden]='!isMapView'>
			<sa-bmap-chart [trackParams]='drawTrackArr' [isShowBmap]='isMapView' deviceId="deviceId"></sa-bmap-chart>
		</div>
	</div>


	<!-- 问题统计模态框（Modal） -->
	<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 720px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" (click)="problemTotalClose(myModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">问题汇总</h4>
				</div>
				<div class="modal-body" style="padding:12px;max-height: 600px;overflow: auto;">
					<div class="problemMes">
						<div class="hardwareProblem" *ngFor="let item of questionDataSortList">
							<p class="problemTitle">{{item.title}}</p>
							<div class="artiTypeCar">
								<span class="s-problem-title">散装</span>
								<ul class="problemUL">
									<li *ngIf="item.data.bulkCar.length == 0" class="empty-data">暂无</li>
									<li class="qItemli" *ngFor="let _item of item.data.bulkCar">
										<span class="qItemName">{{_item.reason}}</span><span class="qItemNum" [ngClass]="{'colorRed':_item.reasonCount>20}">{{_item.reasonCount}}</span>
									</li>
								</ul>
							</div>
							<div class="artiTypeCar">
								<span class="s-problem-title">袋装</span>
								<ul class="problemUL">
									<li *ngIf="item.data.baggedCar.length == 0" class="empty-data">暂无</li>
									<li class="qItemli" *ngFor="let _item of item.data.baggedCar">
										<span class="qItemName">{{_item.reason}}</span><span class="qItemNum" [ngClass]="{'colorRed':_item.reasonCount>20}">{{_item.reasonCount}}</span>
									</li>
								</ul>
							</div>
							<div class="artiTypeCar">
								<span class="s-problem-title">其他</span>
								<ul class="problemUL">
									<li *ngIf="item.data.ohterCar.length == 0" class="empty-data">暂无</li>
									<li class="qItemli" *ngFor="let _item of item.data.ohterCar">
										<span class="qItemName">{{_item.reason}}</span><span class="qItemNum" [ngClass]="{'colorRed':_item.reasonCount>20}">{{_item.reasonCount}}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--问题统计 end -->

	<!-- 待维修车辆TOP20   弹窗-->
	<section bsModal #problemTotalModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 1030px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" (click)="problemTotalClose(problemTotalModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">问题汇总统计</h4>
				</div>
				<div class="modal-body">
					<div class="row form-horizontal">
						<div style="border: 1px solid #ddd;border-radius: 4px;padding: 12px;" *ngIf="selectedCompanyName||carNumber||exceptionTypeName||programTypeName||useTypeL1Name||useTypeL2Name||searchKey||startTime||endTime">
							<ul class="row">
								<li style="font-size: 14px;font-weight: bold;margin-bottom: 4px;">筛选条件</li>
								<li class="col-sm-4" *ngIf="selectedCompanyName"><span>公司名称：</span><span>{{selectedCompanyName}}</span></li>
								<li class="col-sm-4" *ngIf="carNumber"><span>车牌号码：</span><span>{{carNumber}}</span></li>
								<li class="col-sm-4" *ngIf="exceptionTypeName"><span>问题分类：</span><span>{{exceptionTypeName}}</span></li>
								<li class="col-sm-4" *ngIf="programTypeName"><span>现象分类：</span><span>{{programTypeName}}</span></li>
								<li class="col-sm-4" *ngIf="useTypeL1Name"><span>车辆用途：</span><span>{{useTypeL1Name}}</span></li>
								<li class="col-sm-4" *ngIf="useTypeL2Name"><span>车辆分类：</span><span>{{useTypeL2Name}}</span></li>
								<li class="col-sm-4" *ngIf="startTime"><span>开始时间：</span><span>{{startTime}}</span></li>
								<li class="col-sm-4" *ngIf="endTime"><span>结束时间：</span><span>{{endTime}}</span></li>
								<li class="col-sm-4" *ngIf="searchKey"><span>关键字：</span><span>{{searchKey}}</span></li>
							</ul>
						</div>
						<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
							<tr>
								<th>问题点</th>
								<th *ngFor="let item of dataAbnormalCarTotalList">{{item.name}}</th>
							</tr>
							<tr>
								<td>次数</td>
								<td *ngFor="let item of dataAbnormalCarTotalList">{{item.value}}</td>
							</tr>
						</table>

						<div id="questionPieChart" style="width:988px; height: 400px;"></div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- 待维修车辆TOP20 end-->

	<!-- 问题车辆TOP20   弹窗-->
	<section bsModal #dataAbnormalModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 1100px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" (click)="dataAbnormalClose(dataAbnormalModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">数据问题车辆TOP{{topNumber}}
						<div class="btn_ground" style="min-width: 160px;float: right;margin-right: 60px;">
							<button class="btn_color" [ngClass]="{'active':curBtn === '1'}" (click)="topDateSelect('1')">今天</button>
							<button class="btn_color" [ngClass]="{'active':curBtn === '2'}" (click)="topDateSelect('2')">近一周</button>
							<button class="btn_color" [ngClass]="{'active':curBtn === '3'}" (click)="topDateSelect('3')">当月</button>
						</div>
						<div class="page-header page-header-btn" style="float: right;margin: 0;padding: 0;border: none;">
							<div class="top_module top_module_box right" style="margin: 0;">
								<span class="top_module_label module_text">TOP{{topNumber}}排名</span>
								<select name="" class="top_module_select" [(ngModel)]="topNumber" (change)="topNumberChange()" style="min-width: 32px;">
									<option value="10">10</option>
									<option value="20">20</option>
									<option value="30">30</option>
									<option value="40">40</option>
									<option value="50">50</option>
								</select>
							</div>
						</div>
					</h4>
				</div>
				<div class="modal-body">
					<div class="row form-horizontal dataAbnormal" style="position: relative;">
						<div style="border: 1px solid #ddd;border-radius: 4px;padding: 12px;" *ngIf="selectedCompanyName||carNumber||exceptionTypeName||programTypeName||useTypeL1Name||useTypeL2Name||searchKey||startTime||endTime">
							<ul class="row">
								<li style="font-size: 14px;font-weight: bold;margin-bottom: 4px;">筛选条件</li>
								<li class="col-sm-4" *ngIf="selectedCompanyName"><span>公司名称：</span><span>{{selectedCompanyName}}</span></li>
								<li class="col-sm-4" *ngIf="carNumber"><span>车牌号码：</span><span>{{carNumber}}</span></li>
								<li class="col-sm-4" *ngIf="exceptionTypeName"><span>问题分类：</span><span>{{exceptionTypeName}}</span></li>
								<li class="col-sm-4" *ngIf="programTypeName"><span>现象分类：</span><span>{{programTypeName}}</span></li>
								<li class="col-sm-4" *ngIf="useTypeL1Name"><span>车辆用途：</span><span>{{useTypeL1Name}}</span></li>
								<li class="col-sm-4" *ngIf="useTypeL2Name"><span>车辆分类：</span><span>{{useTypeL2Name}}</span></li>
								<li class="col-sm-4" *ngIf="startTime"><span>开始时间：</span><span>{{startTime}}</span></li>
								<li class="col-sm-4" *ngIf="endTime"><span>结束时间：</span><span>{{endTime}}</span></li>
								<li class="col-sm-4" *ngIf="searchKey"><span>关键字：</span><span>{{searchKey}}</span></li>
								<li class="col-sm-4" *ngIf="topNumber"><span>top排名：</span><span>前{{topNumber}}名</span></li>
							</ul>
						</div>
						<table *ngIf="dataAbnormalCarTopList.length > 0" class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
							<tr>
								<th>排名</th>
								<th>车牌号码</th>
								<th>上货问题</th>
								<th>多次上货</th>
								<th>卸货问题</th>
								<th>多次卸货</th>
								<th>在途问题</th>
								<th>主机问题</th>
								<th>传感器问题</th>
								<th>GPS问题</th>
								<th>司机问题</th>
								<th>对接问题</th>
								<th>运维问题</th>
								<th>合计</th>
							</tr>
							<tr *ngFor="let item of dataAbnormalCarTopList;let i=index">
								<td>{{i+1}}</td>
								<td>{{item.carNumber}}</td>
								<td>{{item.A101}}</td>
								<td>{{item.A104}}</td>
								<td>{{item.A102}}</td>
								<td>{{item.A105}}</td>
								<td>{{item.A103}}</td>
								<td>{{item.A201}}</td>
								<td>{{item.A202}}</td>
								<td>{{item.A203}}</td>
								<td>{{item.A301}}</td>
								<td>{{item.A401}}</td>
								<td>{{item.A501}}</td>
								<td>{{item.totleCount}}</td>
							</tr>
						</table>
						<div class="note" *ngIf="dataAbnormalCarTopList.length == 0">暂无数据</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- 问题车辆TOP20 end-->


	<!--审核弹窗-->
	<div bsModal #checkModay="bs-modal" class="modal" id="checkModay" tabindex="-1" role="dialog" aria-labelledby="checkModayLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					审核信息
					<button type="button" class="close" (click)="checkModay.hide()">&times;</button>
				</div>
				<div class="modal-body">
					<textarea class="handleInfo form-control " [(ngModel)]="checkRemark" cols="30" placeholder="请输入审核意见。" rows="4"></textarea>
				</div>
				<div class="modal-footer" style="clear: both;">
					<!--<button type="button" class="btn btn-danger" (click)='checkRow(2)'>不通过</button>-->
					<button type="button" class="btn btn-primary" (click)='checkRow(1,checkModay)'>通过</button>
					<button type="button" class="btn btn-default" (click)="checkModay.hide()">关闭</button>
				</div>
			</div>
		</div>
	</div>
</div>